<template>
  <div class="layout-container">
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="280px" class="sidebar">
        <div class="logo">
          <div class="logo-icon">
            <el-icon size="20"><OfficeBuilding /></el-icon>
          </div>
          <div class="logo-text">团队角色评估系统V1.0</div>
        </div>

        <div class="menu-container">
          <!-- 首页 -->
          <div class="menu-group">
            <div
              :class="['menu-item', 'single-item', { active: route.path === '/dashboard' || route.path === '/dashboard/home' }]"
              @click="handleMenuClick('/dashboard/home')"
            >
              <div class="menu-icon">
                <House />
              </div>
              <span class="menu-text">首页</span>
            </div>
          </div>

          <!-- 权限管理 -->
          <div class="menu-group">
            <div
              :class="['menu-item', 'group-header', { active: isGroupActive('permission') }]"
              @click="toggleGroup('permission')"
            >
              <div style="display: flex">
              <div class="menu-icon">
                <UserFilled />
              </div>
              <span class="menu-text">权限管理</span>
              </div>
              <el-icon class="expand-icon" :class="{ expanded: expandedGroups.permission }">
                <ArrowRight />
              </el-icon>
            </div>
            <div v-show="expandedGroups.permission" class="sub-menu">
              <div
                :class="['menu-item', 'sub-item', { active: route.path === '/dashboard/permission/role' }]"
                @click="handleMenuClick('/dashboard/permission/role')"
              >
                <span class="menu-text">角色管理</span>
              </div>
              <div
                :class="['menu-item', 'sub-item', { active: route.path === '/dashboard/permission/account' }]"
                @click="handleMenuClick('/dashboard/permission/account')"
              >
                <span class="menu-text">账号管理</span>
              </div>
            </div>
          </div>

          <!-- 组织管理 -->
          <div class="menu-group">
            <div
              :class="['menu-item', 'group-header', { active: isGroupActive('organization') }]"
              @click="toggleGroup('organization')"
            >
              <div style="display: flex">
              <div class="menu-icon">
                <OfficeBuilding />
              </div>

              <span class="menu-text">组织管理</span>
              </div>
              <el-icon class="expand-icon" :class="{ expanded: expandedGroups.organization }">
                <ArrowRight />
              </el-icon>
            </div>
            <div v-show="expandedGroups.organization" class="sub-menu">
              <div
                :class="['menu-item', 'sub-item', { active: route.path === '/dashboard/organization/department' }]"
                @click="handleMenuClick('/dashboard/organization/department')"
              >
                <span class="menu-text">部门管理</span>
              </div>
            </div>
          </div>

          <!-- 团队测评 -->
          <div class="menu-group">
            <div
              :class="['menu-item', 'group-header', { active: isGroupActive('assessment') }]"
              @click="toggleGroup('assessment')"
            >
              <div style="display: flex">
              <div class="menu-icon">
                <DataAnalysis />
              </div>
                <span class="menu-text">团队测评</span></div>
              <el-icon class="expand-icon" :class="{ expanded: expandedGroups.assessment }">
                <ArrowRight />
              </el-icon>
            </div>
            <div v-show="expandedGroups.assessment" class="sub-menu">
              <div
                :class="['menu-item', 'sub-item', { active: route.path === '/dashboard/assessment/team' }]"
                @click="handleMenuClick('/dashboard/assessment/team')"
              >
                <span class="menu-text">项目团队</span>
              </div>
              <div
                :class="['menu-item', 'sub-item', { active: route.path === '/dashboard/assessment/entry' }]"
                @click="handleMenuClick('/dashboard/assessment/entry')"
              >
                <span class="menu-text">测评入口</span>
              </div>
              <div
                :class="['menu-item', 'sub-item', { active: route.path === '/dashboard/assessment/report' }]"
                @click="handleMenuClick('/dashboard/assessment/report')"
              >
                <span class="menu-text">查询报告</span>
              </div>
            </div>
          </div>
        </div>
      </el-aside>

      <el-container>
        <!-- 顶部导航 -->
        <el-header class="header">
          <div class="header-left">
            <!-- 可以添加其他左侧内容 -->
          </div>

          <div class="header-right">
            <el-button text class="fullscreen-btn" @click="toggleFullscreen">
              <el-icon size="18"><FullScreen /></el-icon>
            </el-button>

            <el-dropdown @command="handleCommand" class="user-dropdown">
              <div class="user-info">
                <el-avatar :size="32" class="user-avatar">{{ userStore.userName?.charAt(0) || '管' }}</el-avatar>
                <span class="username">{{ userStore.userName || '管理员' }}</span>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="profile">
                    <el-icon style="margin-right: 8px;"><User /></el-icon>
                    个人信息
                  </el-dropdown-item>
                  <el-dropdown-item divided command="logout">
                    <el-icon style="margin-right: 8px;"><SwitchButton /></el-icon>
                    退出登录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>

        <!-- 主内容区 -->
        <el-main class="main-content">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  OfficeBuilding,
  UserFilled,
  DataAnalysis,
  FullScreen,
  ArrowRight,
  House,
  User,
  SwitchButton
} from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

// 展开的菜单组
const expandedGroups = ref({
  permission: true,
  organization: true,
  assessment: true
})

// 菜单项配置（保留原有配置作为备用）
const menuItems = ref([
  {
    path: '/dashboard/permission/role',
    title: '权限管理',
    icon: UserFilled
  },
  {
    path: '/dashboard/organization/department',
    title: '组织管理',
    icon: OfficeBuilding
  },
  {
    path: '/dashboard/assessment/team',
    title: '团队测评',
    icon: DataAnalysis
  }
])

// 判断菜单组是否激活
const isGroupActive = (groupName) => {
  return route.path.includes(groupName)
}

// 切换菜单组展开状态
const toggleGroup = (groupName) => {
  expandedGroups.value[groupName] = !expandedGroups.value[groupName]
}

// 判断菜单是否激活
const isMenuActive = (menuPath) => {
  return route.path.includes(menuPath.split('/')[2]) // 匹配模块路径
}

// 处理菜单点击
const handleMenuClick = (path) => {
  router.push(path)
}

// 切换全屏
const toggleFullscreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen()
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen()
    }
  }
}

// 处理用户下拉菜单命令
const handleCommand = async (command) => {
  switch (command) {
    case 'profile':
      router.push('/dashboard/profile')
      break
    case 'logout':
      try {
        await ElMessageBox.confirm('确定要退出登录吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })

        userStore.logout()
        router.push('/login')
        ElMessage.success('已退出登录')
      } catch {
        // 用户取消
      }
      break
  }
}
</script>
<style scoped>
.layout-container {
  height: 100vh;
}

.sidebar {
  background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
  position: relative;
}

.logo {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-weight: bold;
  flex-direction: column;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo-icon {
  width: 40px;
  height: 40px;
  background: #5a67d8;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.logo-text {
  font-size: 16px;
  color: white;
  text-align: center;
  font-weight: 500;
}

.menu-container {
  padding: 20px 0;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 16px 8px;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.3s;
  margin: 4px 16px;
  border-radius: 8px;
  position: relative;
}

.menu-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.menu-item.active {
  background: #5a67d8;
  color: white;
  box-shadow: 0 4px 12px rgba(90, 103, 216, 0.4);
}

.menu-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  font-size: 18px;
}

.menu-text {
  font-size: 15px;
  font-weight: 500;
}

.menu-item.single-item {
  margin-bottom: 8px;
}

.group-header {
  justify-content: space-between;
}

.expand-icon {
  transition: transform 0.3s;
  color: rgba(255, 255, 255, 0.6);
}

.expand-icon.expanded {
  transform: rotate(90deg);
}

.sub-menu {
  padding-left: 20px;
}

.sub-item {
  padding: 12px 24px;
  margin: 2px 16px;
  font-size: 14px;
}

.sub-item .menu-text {
  font-size: 14px;
  font-weight: 400;
}

.header {
  background: white;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.header-left {
  display: flex;
  align-items: center;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.fullscreen-btn {
  color: #6b7280;
  padding: 8px;
}

.fullscreen-btn:hover {
  color: #374151;
  background: #f3f4f6;
}

.user-dropdown {
  cursor: pointer;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: 8px;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.user-info:hover {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.user-avatar {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.username {
  color: #2d3748;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.main-content {
  background: #f8fafc;
  padding: 24px;
  min-height: calc(100vh - 60px);
  overflow-y: auto;
}
</style>
